<template>
  <div class="page-box">
    <div class="title-card-box"><TitleCard   :title="'补贴明细'"></TitleCard></div>


    <CustomizeTable :columns="columns" :fetch-data="fetchTableData" permission-prefix="sys:user" :show-selection="true"
      :show-index="false" :export-file-name="'用户'" :init-search-form="{}" @edit="handleEdit" @delete="handleDelete"
      @reset="reset" @status-change="handleStatusChange" ref="table" :showOperation="false" :showKeywordSearch="false">
       <!-- 搜索区域扩展 -->
      <template #searchExtend>
        <div class="search-box">
          <el-input v-model="searchForm.nicknameOrTel" placeholder="用户的账号/手机号" clearable style="width: 200px; margin-right: 10px;"></el-input>
          <el-input v-model="searchForm.superiorNicknameOrTel" placeholder="上级用户的账号/手机号" clearable style="width: 200px; margin-right: 10px;"></el-input>
        </div>
      </template>

    <template v-slot:baseInfo="{ row }">
      <PublicCell
      :dataList="[
        {name:'用户昵称',value:row.nickname},
        {name:'会员账号',value:row.phone_number},
        {name:'用户等级',value:row.role_type_name, isLable:true},

      ]"
      :fontStyle="{ color: '#333' }"
      >
      </PublicCell>
    </template>


    <template v-slot:orderInfo="{ row }">
      <PublicCell
      :dataList="[
        {name:'订单号',value:row.order_no},
        {name:'结算时间',value:row.update_time},
        {name:'订单金额',value:row.order_amount},

      ]"
      :fontStyle="{ color: '#333' }"
      >
      </PublicCell>
    </template>

    <template v-slot:superiorInfo="{ row }">
      <PublicCell
      :dataList="[
        {name:'用户昵称',value:row.nickname},
        {name:'会员账号',value:row.superior_phone_number},
        {name:'用户等级',value:row.superior_role_type_name, isLable:true},

      ]"
      :fontStyle="{ color: '#333' }"
      >
      </PublicCell>
    </template>
  </CustomizeTable>

    <!-- 审核弹窗 -->
    <el-dialog title="用户信息" :visible.sync="dialogVisible" width="40%">

    </el-dialog>

  </div>
</template>

<script>
  import {

  } from '@/constants/statusMap';

  import {toString} from "@/utils/tools.js";
  import CustomizeTable from "@/components/CustomizeTable.vue";
  //import ManagerInfoCell from "../components/ManagerInfoCell.vue";
  //import ManagerNumCell from "../components/ManagerNumCell.vue";
  // import RangeInputCard from "@/components/RangeInputCard.vue";
  import PublicCell from "@/components/PublicCell.vue";


  export default {
    components: {

      CustomizeTable,
     // RangeInputCard,

     // ManagerInfoCell,
     // ManagerNumCell,
      PublicCell

    },
    data() {
      return {

        dialogVisible: false,
        currentRow: null,
        columns: [
          {
            prop: "avatar",
            label: "头像",
            width: "80px"
          },
          {
            prop: "baseInfo",
            label: "用户信息",
            slot: "baseInfo",
          },

          {
            prop: "orderInfo",
            label: "订单信息",
            slot: "orderInfo",
             width: "350px"

          },
          {
            prop: "subsidy_amount",
            label: "补贴明细",
            width: "150px"
          },
          {
            prop: "superior_avatar",
            label: "上级头像",
            width: "80px"
          },

          {
            prop: "superiorInfo",
            label: "上级信息",
            slot: "superiorInfo",
          }
        ],
        searchForm: {


        },
      };
    },
    methods: {
      hangToString(val){
       return toString(val)
      },
      // 获取表格数据
      async fetchTableData(params = {}) {

        const postData = Object.assign({}, params, this.searchForm);
        if(postData.startTime){
          postData.start_time = postData.startTime
          postData.end_time = postData.endTime
        }
        try {
          const result = await this.$httpRequest.post('/financialStatements/subsidyDetailsList', postData)
          console.log('-------fetchTableData----', result)
          return result
        } catch (e) {
          this.$message.error(e.message)
          throw e // 保持错误继续向上传递
        }

      },
      //重置
      reset() {
        this.searchForm.role_id = '';

      },
      // 编辑
      handleEdit(row) {
        // 打开编辑对话框逻辑
        this.currentRow = {
          ...row
        }; // 可深拷贝
        this.dialogVisible = true;
      },

      // 删除
      async handleDelete(row) {
        console.log("删除:", row);
      },

      // 状态变更
      async handleStatusChange(row) {
        console.log("状态变更:", row);
        this.$message.success("状态更新成功");
      },

      handleApprove(payload) {
        console.log("-----状态变更----:", payload);
        this.$httpRequest.post('/user/status', payload).then(result => {
          console.log('--approved---result------', result)
          if (result.code == 0) {
            this.$message.success('完成状态修改')
            this.$refs.table.refresh()
          } else {
            this.$message.error('状态修改失败')
          }
        }).catch(e => {
          this.$message.error(e.message)
        });
      },



    },
  };
</script>

<style>
  .page-box {
    padding: 20px;

  }

  .panbox {
    display: flex;
    justify-content: space-between;
    align-content: center;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    min-height: 200px;
  }

  .panbox-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 20px 50px;
    box-sizing: border-box;
    border-radius: 20px;

    position: relative;
    height: 50px;
  }


  .panbox-item-ex {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 50px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    top: 8px;
    left: 0;
    box-shadow: 2px 2px 2px 2px #efefef;
  }


   .pit1-bg{
     background-color: #5772ef;
   }

   .pit2-bg{
     background-color: #4d45cd;
   }

   .pit3-bg{
     background-color: #529bf0;
   }

   .pit4-bg{
     background-color: #55ccf1;
   }



  .pit-1 {
    font-size: 12px;
    color: #999;
  }

  .pit-2 {
    margin-top: 5px;
    font-size: 24px;
    font-weight: 600;
    color: #111;
  }

  .pit-3 {
    margin-top: 5px;
    font-size: 12px;
    color: #008B00;
  }

  .pi-img-box {
    width: 45px;
    height: 45px;
    border-radius: 10px;

    box-sizing: border-box;
    overflow: hidden;
  }


  .p-10{
    padding: 10px;
  }
  .p-5{
    padding: 5px;
  }

  .pi-img-box img {
    width: 100%;
    height: 100%;
  }

  .panbox-item-title-box {
    padding-left: 20px;
    box-sizing: border-box;
  }

  .full-fix {
    width: 20px;
    height: 40px;
  }

  .table-box{
    width: 100%;
    margin-top: 20px;
  }

  .search-box{
    display:inline-flex;

    align-items: center;
  }
</style>
